<script setup>
import { ref } from "vue";
const centerDialogVisible = ref(false);
const centerDialogVisible1 = ref(false);
const centerDialogVisible2 = ref(false);
const open = () => {
  centerDialogVisible.value = true;
};
const open1 = () => {
  centerDialogVisible1.value = true;
};
const open2 = () => {
  centerDialogVisible2.value = true;
};
</script>

<template>
  <div class="router_view">
    <router-view></router-view>
    <div class="info-card" @click="open">公司简介</div>
    <div class="info-card1" @click="open1">联系方式</div>
    <div class="info-card2" @click="open2">产品介绍</div>
    <el-dialog
      title="公司简介"
      v-model="centerDialogVisible"
      width="90%"
      center
      style="z-index: 9999"
    >
      <p>
        萧县渔樵文化传媒有限公司坐落于安徽省宿州市萧县锦屏街道公园路 68
        号，是一家专注于八字测算服务的专业机构，致力于为客户提供精准、深入、个性化的命运解析，助力人们洞察人生轨迹，把握命运机遇。
      </p>
      <p>
        公司拥有由资深命理师和传统文化研究者组成的专业团队，凭借深厚的学术功底和丰富的实践经验，深入钻研八字命理这一中华传统文化瑰宝。熟练掌握传统八字测算的理论与方法，不断结合现代心理学、社会学等知识，为客户提供更全面、更具实用价值的解读与建议。
      </p>
      <p>
        自成立以来，凭借专业的服务、精准的测算和良好的口碑，赢得了众多客户的信赖与支持。未来，我们将继续秉承传承与创新的理念，不断提升服务品质，为更多人揭开命运的神秘面纱，在新的一年里，帮助大家在人生道路上做出更明智的选择，开启幸福美好的人生新篇章。
      </p>

      <template v-slot:footer>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </template>
    </el-dialog>
    <el-dialog
      title="联系我们"
      v-model="centerDialogVisible1"
      width="90%"
      center
      style="z-index: 9999"
    >
      <p>公司：萧县渔樵文化传媒有限公司</p>
      <p>地址：安徽省宿州市萧县锦屏街道公园路 68 号</p>
      <p>手机：16698594804</p>

      <template v-slot:footer>
        <el-button @click="centerDialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible1 = false"
          >确 定</el-button
        >
      </template>
    </el-dialog>
    <el-dialog
      title="产品介绍"
      v-model="centerDialogVisible2"
      width="90%"
      center
      style="z-index: 9999"
    >
      <p>
        服务项目丰富多样，涵盖八字排盘、运势分析、事业发展指导、婚姻情感咨询、流年吉凶预测等多个方面。
      </p>
      <p>
        在八字排盘环节，运用先进的算法和精确的计时系统，确保排出的八字准确无误。
      </p>
      <p>
        运势分析中，从事业、财运、感情、健康等维度出发，细致剖析每个阶段的运势起伏。
      </p>
      <p>事业发展指导依据八字特点，为客户提供适合的职业方向和发展策略。</p>
      <p>婚姻情感咨询帮助客户了解自身情感模式，解决情感困惑。</p>
      <p>
        流年吉凶预测提前告知客户每年可能面临的机遇与挑战，以便做好应对准备。
      </p>

      <template v-slot:footer>
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible2 = false"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-modal-dialog {
  z-index: 9999 !important;
}
.router_view {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 0px;
  display: block;
  unicode-bidi: isolate;
  overflow: auto;
  box-sizing: border-box;
  .info-card {
    position: absolute; /* 绝对定位 */
    top: 300px;
    right: 0;
    width: 24px;
    // height: 20px;
    font-size: 14px;
    // line-height: 20px;
    color: #4461e0;
    background-color: rgba(255, 255, 204, 0.9); /* 淡黄色背景 */
    border: 1px solid rgba(255, 166, 0, 0.601); /* 橙色边框 */
    border-radius: 10px 0 0 10px; /* 左侧圆角，右侧无圆角 */
    padding: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 9997;
  }
  .info-card1 {
    position: absolute; /* 绝对定位 */
    top: 400px;
    right: 0;
    width: 24px;
    // height: 20px;
    font-size: 14px;
    // line-height: 20px;
    color: #4461e0;
    background-color: rgba(255, 255, 204, 0.9); /* 淡黄色背景 */
    border: 1px solid rgba(255, 166, 0, 0.601); /* 橙色边框 */
    border-radius: 10px 0 0 10px; /* 左侧圆角，右侧无圆角 */
    padding: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 9997;
  }
  .info-card2 {
    position: absolute; /* 绝对定位 */
    top: 500px;
    right: 0;
    width: 24px;
    // height: 20px;
    font-size: 14px;
    // line-height: 20px;
    color: #4461e0;
    background-color: rgba(255, 255, 204, 0.9); /* 淡黄色背景 */
    border: 1px solid rgba(255, 166, 0, 0.601); /* 橙色边框 */
    border-radius: 10px 0 0 10px; /* 左侧圆角，右侧无圆角 */
    padding: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 9997;
  }
}

@media (min-width: 442px) and (max-width: 1300px) {
  .router_view {
    max-width: 390px;
  }
}
</style>
